<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="bootstrap.min.css">
    <script src="jquery.min.js"></script>
    <script src="bootstrap.min.js"></script>
    <script src="jquery.form.min.js"></script>
    <script src="socket.io.min.js"></script>
    <script>
        $(document).ready(function () {
            var options = {
                url: "http://121.42.152.117:1337/login",
                type: "POST",
                dataType: "json",
                success: function (data) {
                    localStorage.token = data.token;
                    $('#token').text(data.token);
                },
                error: function (data) {
                    $('#token').text('');
                }
            };
            $('#login').ajaxForm(options);
        });

        var socket = null;

        function connect() {
            socket = io.connect("http://121.42.152.117:1337", {
                'query': 'token=' + localStorage.token,
                'force new connection': true,
                reconnect: false
            });

            socket.on('error', function (data) {
                $('#message').append($('<dt>error</dt>'));
                $('#message').append($('<dd></dd>').text(window.JSON.stringify(data)));
            });

            socket.on('connect', function () {
                $('#message').append($('<dt>connect</dt>'));
                $('#message').append($('<dd>Connected</dd>'));

                socket.on('user left', function (data) {
                    $('#message').append($('<dt>user left</dt>'));
                    $('#message').append($('<dd></dd>').text(window.JSON.stringify(data)));
                });

                socket.on('user joined', function (data) {
                    $('#message').append($('<dt>user joined</dt>'));
                    $('#message').append($('<dd></dd>').text(window.JSON.stringify(data)));
                });

                socket.on('gmsg', function (data) {
                    $('#message').append($('<dt>gmsp</dt>'));
                    $('#message').append($('<dd></dd>').text(window.JSON.stringify(data)));
                });

                socket.on('anything', function (data) {
                    $('#message').append($('<dt>unknown</dt>'));
                    $('#message').append($('<dd></dd>').text(window.JSON.stringify(data)));
                });

				socket.on('receiveByQid', function (data) {
                    $('#message').append($('<dt>receiveByQid</dt>'));
                    $('#message').append($('<dd></dd>').text(window.JSON.stringify(data)));
                });

				socket.on('receiveByU', function (data) {
                    $('#message').append($('<dt>receiveByU</dt>'));
                    $('#message').append($('<dd></dd>').text(window.JSON.stringify(data)));
                });

				socket.on('receiveByQU', function (data) {
                    $('#message').append($('<dt>receiveByQU</dt>'));
                    $('#message').append($('<dd></dd>').text(window.JSON.stringify(data)));
                });

                socket.on('disconnect', function () {
                    $('#message').append($('<dt>disconnect</dt>'));
                    $('#message').append($('<dd>Disconnected</dd>'));
                    socket = null;
                });


            });
        }

        function disconnect() {
            socket.disconnect(true);
        }

        function join() {
            socket.emit('join', {'gid': $('#join').val()}, function (err, data) {
                if (err) {
                    $('#message').append($('<dt>join error</dt>'));
                    $('#message').append($('<dd></dd>').text(err));
                } else {
                    $('#message').append($('<dt>joined</dt>'));
                    $('#message').append($('<dd></dd>').text(window.JSON.stringify(data)));
                }
            });
        }
        function create() {
            socket.emit('create', {'gid': $('#create').val()}, function (err, data) {
                if (err) {
                    $('#message').append($('<dt>create error</dt>'));
                    $('#message').append($('<dd></dd>').text(err));
                } else {
                    $('#message').append($('<dt>created</dt>'));
                    $('#message').append($('<dd></dd>').text(window.JSON.stringify(data)));
                }
            });
        }
        function leave() {
            socket.emit('leave', {'gid': $('#leave').val()}, function (err, data) {
                if (err) {
                    $('#message').append($('<dt>leave error</dt>'));
                    $('#message').append($('<dd></dd>').text(err));
                } else {
                    $('#message').append($('<dt>left</dt>'));
                    $('#message').append($('<dd></dd>').text(window.JSON.stringify(data)));
                }
            });
        }

        function send() {
            var data = {'gid': $('#gid').val(), 'msg': $('#gmsg').val()};
            socket.emit('gmsg', data, function (err, data) {
                if (err) {
                    $('#message').append($('<dt>gmsg error</dt>'));
                    $('#message').append($('<dd></dd>').text(err));
                } else {
                    $('#message').append($('<dt>gmsg sent</dt>'));
                    $('#message').append($('<dd></dd>').text(window.JSON.stringify(data)));
                }
            });
        }

		function sendByU() {
            var data = {'name': $('#name').val(), 'msg': $('#fmsg').val()};
            socket.emit('sendByU', data);
            $('#message').append($('<dt>friend msg sent</dt>'));
            $('#message').append($('<dd></dd>').text(window.JSON.stringify(data)));
        }

		function sendByUQ() {
            var data = {'name': $('#name').val(),'question': $('#question').val(), 'msg': $('#fmsg').val()};
            socket.emit('sendByUQ', data);
            $('#message').append($('<dt>friend msg sent sendByUQ</dt>'));
            $('#message').append($('<dd></dd>').text(window.JSON.stringify(data)));
        }

		function sendByQid() {
            var data = {'question': $('#question').val(), 'msg': $('#fmsg').val()};
            socket.emit('sendByQid', data);
            $('#message').append($('<dt>friend msg sent sendByQid</dt>'));
            $('#message').append($('<dd></dd>').text(window.JSON.stringify(data)));
        }

        function getQuestions() {
            var settings = {
                type: "GET",
                url: "http://121.42.152.117:1337/question",
                headers: {
                    'token': localStorage.token
                },
                crossDomain: true,
                success: function (data) {
                    //$("#quest").text(window.JSON.stringify(data));
                    var len = data.questions.length;
                    for (var i = 0; i < len; ++i) {
                        $('#questions').append($('<li></li>').text(window.JSON.stringify(data.questions[i])));
                    }
                },
                error: function (data) {
                    $("#quest").text(window.JSON.stringify(data));
                }
            };
            $.ajax(settings);
        }

    </script>
</head>
<body>
<form id="login" role="form" action="http://121.42.152.117:1337/login" method="post">
        <div class="form-group">
            <label class="col-sm-2 control-label">Username</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" name="username">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">Password</label>
            <div class="col-sm-10">
                <input type="password" class="form-control" name="password">
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <button type="submit" class="btn btn-default">Login</button>
            </div>
        </div>
    </form>
<p class="lead" id="token"></p>
<div class="col-sm-10">
    <button class="btn btn-default" onClick=getQuestions()>get question</button>
    <p class="lead" id="quest"></p>
    <ul id="questions"></ul>
</div>
<div class="col-sm-10 form-group">
    <button class="btn btn-default" onClick=connect()>connect</button>
    <button class="btn btn-default" onClick=disconnect()>disconnect</button>
</div>
<div class="col-sm-10">
    <div class="form-group">
        <input type="text" class="form-control" id="create" placeholder="create">
        <button class="btn btn-default" onClick=create()>create</button>
    </div>
    <div class="form-group">
        <input type="text" class="form-control" id="join" placeholder="join">
        <button class="btn btn-default" onClick=join()>join</button>
    </div>
    <div class="form-group">
        <input type="text" class="form-control" id="leave" placeholder="leave">
        <button class="btn btn-default" onClick=leave()>leave</button>
    </div>
    <div class="form-group">
        <input type="text" class="form-control" id="gid" placeholder="group id">
        <input type="text" class="form-control" id="gmsg" placeholder="group msg">
        <button class="btn btn-default" onClick=send()>send</button>
    </div>
</div>
<div class="col-sm-10">
    <div class="friend-group">
		<input type="text" class="form-control" id="question" placeholder="question id">
        <input type="text" class="form-control" id="name" placeholder="friend name">
        <input type="text" class="form-control" id="fmsg" placeholder="friend msg">
        <button class="btn btn-default" onClick=sendByU()>sendByU</button>
		<button class="btn btn-default" onClick=sendByQid()>sendByQid</button>
		<button class="btn btn-default" onClick=sendByUQ()>sendByUQ</button>
    </div>
</div>
<div>
    <dl id="message" class="dl-horizontal"></dl>
</div>
</body>
</html>